---
title: API интеграции Astro
i18nReady: true
---
import Since from '~/components/Since.astro'

**Интеграции Astro** добавляют новую функциональность и поведение в ваш проект всего несколькими строками кода.

Эта справочная страница предназначена для тех, кто пишет свои собственные интеграции. Чтобы узнать, как использовать интеграцию в своем проекте, ознакомьтесь с нашим [Руководством по использованию интеграций](/ru/guides/integrations-guide/).

## Примеры

Официальные интеграции Astro могут служить вам в качестве примера при создании собственных интеграций.

- **Рендереры:** [`lit`](/ru/guides/integrations-guide/lit/), [`svelte`](/ru/guides/integrations-guide/svelte/), [`react`](/ru/guides/integrations-guide/react/), [`preact`](/ru/guides/integrations-guide/preact/), [`vue`](/ru/guides/integrations-guide/vue/), [`solid`](/ru/guides/integrations-guide/solid-js/)
- **Библиотеки:** [`tailwind`](/ru/guides/integrations-guide/tailwind/), [`partytown`](/ru/guides/integrations-guide/partytown/)
- **Функционал:** [`sitemap`](/ru/guides/integrations-guide/sitemap/)

## Быстрая справка по API

```ts
interface AstroIntegration {
  name: string;
  hooks: {
    'astro:config:setup'?: (options: {
      config: AstroConfig;
      command: 'dev' | 'build' | 'preview';
      isRestart: boolean;
      updateConfig: (newConfig: DeepPartial<AstroConfig>) => AstroConfig;
      addRenderer: (renderer: AstroRenderer) => void;
      addWatchFile: (path: URL | string) => void;
      addClientDirective: (directive: ClientDirectiveConfig) => void;
      addMiddleware: (middleware: AstroIntegrationMiddleware) => void;
      addDevToolbarApp: (pluginEntrypoint: string) => void;
      injectScript: (stage: InjectedScriptStage, content: string) => void;
      injectRoute: ({ pattern: string, entrypoint: string }) => void;
      logger: AstroIntegrationLogger;
    }) => void;
    'astro:config:done'?: (options: { config: AstroConfig; setAdapter: (adapter: AstroAdapter) => void; logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:server:setup'?: (options: { server: vite.ViteDevServer; logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:server:start'?: (options: { address: AddressInfo; logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:server:done'?: (options: { logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:build:start'?: (options: { logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:build:setup'?: (options: {
      vite: ViteConfigWithSSR;
      pages: Map<string, PageBuildData>;
      target: 'client' | 'server';
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:build:generated'?: (options: { dir: URL; logger: AstroIntegrationLogger; }) => void | Promise<void>;
    'astro:build:ssr'?: (options: {
        manifest: SerializedSSRManifest;
        entryPoints: Map<RouteData, URL>;
        logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:build:done'?: (options: { dir: URL; routes: RouteData[]; logger: AstroIntegrationLogger; }) => void | Promise<void>;
  };
}
```

## Хуки

### `astro:config:setup`

**Следующий хук:** [`astro:config:done`](#astroconfigdone)

**Когда:** При инициализации, перед тем как [Vite](https://vitejs.dev/config/) или [конфигурация Astro ](/ru/reference/configuration-reference/) будут разрешены.

**Зачем:** Для расширения конфигурации проекта. Это включает обновление [конфигурации Astro](/ru/reference/configuration-reference/), применение [плагинов Vite](https://vitejs.dev/guide/api-plugin.html), добавление рендеров компонентов и внедрение скриптов на страницу.
```ts
'astro:config:setup'?: (options: {
  config: AstroConfig;
  command: 'dev' | 'build' | 'preview';
  isRestart: boolean;
  updateConfig: (newConfig: DeepPartial<AstroConfig>) => AstroConfig;
  addRenderer: (renderer: AstroRenderer) => void;
  addClientDirective: (directive: ClientDirectiveConfig) => void;
  addMiddleware: (middleware: AstroIntegrationMiddleware) => void;
  addDevToolbarApp: (pluginEntrypoint: string) => void;
  addWatchFile: (path: URL | string) => void;
  injectScript: (stage: InjectedScriptStage, content: string) => void;
  injectRoute: ({ pattern: string, entrypoint: string }) => void;
  logger: AstroIntegrationLogger;
}) => void;
```

#### Опция `config`

**Тип:** `AstroConfig`

Доступная только для чтения копия пользовательской [конфигурации Astro](/ru/reference/configuration-reference/). Это разрешается _до_ запуска любых других интеграций. Если вам нужна копия конфигурации после того, как все интеграции завершили обновление своих конфигураций, [см. хук `astro:config:done`](#astroconfigdone).

#### Опция `command`

**Тип:** `'dev' | 'build' | 'preview'`

- `dev` —  Проект выполняется с помощью astro dev
- `build` —  Проект выполняется с помощью `astro build`
- `preview` —  Проект выполняется с помощью `astro preview`

#### Опция `isRestart`

**Тип:** `boolean`

`false` когда сервер разработки запускается, `true` когда происходит перезагрузка. Полезно для определения, когда эта функция вызывается более одного раза.

#### Опция `updateConfig`

**Тип:** `(newConfig: DeepPartial<AstroConfig>) => AstroConfig;`

Функция обратного вызова  для обновления предоставленной пользователем [конфигурации Astro](/ru/reference/configuration-reference/). Любая предоставленная вами конфигурация **будет объединена с пользовательской конфигурацией + обновлениями конфигурации других интеграций,** поэтому вы можете не включать ключи!

Например, предположим, что вам нужно добавить в проект пользователя плагин [Vite](https://vitejs.dev/):

```js
import bananaCSS from '@vitejs/official-banana-css-plugin';

export default {
  name: 'banana-css-integration',
  hooks: {
    'astro:config:setup': ({ updateConfig }) => {
      updateConfig({
        vite: {
          plugins: [bananaCSS()],
        }
      })
    }
  }
}
```

#### Опция `addRenderer`

**Тип:** `(renderer:` [`AstroRenderer`](https://github.com/withastro/astro/blob/fdd607c5755034edf262e7b275732519328a33b2/packages/astro/src/%40types/astro.ts#L872-L883) `) => void;`
**Примеры:** [`lit`](https://github.com/withastro/astro/blob/main/packages/integrations/lit/src/index.ts), [`svelte`](https://github.com/withastro/astro/blob/main/packages/integrations/svelte/src/index.ts), [`react`](https://github.com/withastro/astro/blob/main/packages/integrations/react/src/index.ts), [`preact`](https://github.com/withastro/astro/blob/main/packages/integrations/preact/src/index.ts), [`vue`](https://github.com/withastro/astro/blob/main/packages/integrations/vue/src/index.ts), [`solid`](https://github.com/withastro/astro/blob/main/packages/integrations/solid/src/index.ts)

Функция обратного вызова для добавления рендерера фреймворка компонентов (например, React, Vue, Svelte и т. д.). Вы можете просмотреть примеры и определение типа выше для более продвинутых опций, но вот два основных варианта, о которых стоит знать:

- `clientEntrypoint` - путь к файлу, который выполняется на клиенте при каждом использовании вашего компонента. Это в основном для рендеринга или гидратации вашего компонента с помощью JS.
- `serverEntrypoint` - путь к файлу, который выполняется во время запросов с сервера или статической сборки всякий раз, когда используется ваш компонент. Они должны рендерить компоненты в статическую разметку, с хуками для гидратации, если это применимо. Классическим примером является [обратный вызов `renderToString` от React](https://react.dev/reference/react-dom/server/renderToString).

#### Опция `addWatchFile`

**Тип:** `URL | string`

Если ваша интеграция зависит от какого-то конфигурационного файла, за которым Vite не следит и/или для вступления в силу которого требуется полный перезапуск сервера разработки, добавьте его с помощью `addWatchFile`. Каждый раз, при изменении этого файла, сервер разработки Astro будет перезагружен (вы можете проверить, когда произойдет перезагрузка с помощью `isRestart`).

Пример использования:

```js
// Путь должен быть абсолютным!
addWatchFile('/home/user/.../my-config.json');
addWatchFile(new URL('./tailwind.config.js', config.root));
```

#### Опция `addClientDirective`

<p><Since v="2.6.0" /></p>

**Тип:** `(directive:` [`ClientDirectiveConfig`](https://github.com/withastro/astro/blob/00327c213f74627ac9ca1dec774efa5bf71e9375/packages/astro/src/%40types/astro.ts#L1872-L1875) `) => void;`

Добавляет [пользовательскую директиву клиента](/ru/reference/directives-reference/#custom-client-directives), которая будет использоваться в файлах  `.astro`.

Обратите внимание, что точки входа директив поставляются только через esbuild и должны быть небольшими, чтобы не замедлять гидратацию компонентов.

Пример использования:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import clickDirective from './astro-click-directive/register.js'

// https://astro.build/config
export default defineConfig({
  integrations: [
    clickDirective()
  ],
});
```

```js title="astro-click-directive/register.js"
/**
 * @type {() => import('astro').AstroIntegration}
 */
export default () => ({
  name: "client:click",
  hooks: {
    "astro:config:setup": ({ addClientDirective }) => {
      addClientDirective({
        name: "click",
        entrypoint: "./astro-click-directive/click.js",
      });
    },
  },
});
```

```js title="astro-click-directive/click.js"
/**
 * Гидрация при первом нажатии на окно
 * @type {import('astro').ClientDirective}
 */
export default (load, opts, el) => {
  window.addEventListener('click', async () => {
    const hydrate = await load()
    await hydrate()
  }, { once: true })
}
```

Вы также можете добавить типы для директив в файл определения типов вашей библиотеки:

```ts title="astro-click-directive/index.d.ts"
import 'astro'
declare module 'astro' {
  interface AstroClientDirectives {
    'client:click'?: boolean
  }
}
```

#### Опция `addDevToolbarApp`

<p><Since v="3.4.0" /></p>

**Тип:** `(pluginEntrypoint: string) => void;`

Добавляет [пользовательское приложение панели инструментов разработчика](/ru/reference/dev-toolbar-app-reference/).

Пример использования:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import devToolbarIntegration from './astro-dev-toolbar-app/integration.js'

// https://astro.build/config
export default defineConfig({
  integrations: [
    devToolbarIntegration()
  ],
});
```

```js title="astro-dev-toolbar-app/integration.js"
/**
 * @type {() => import('astro').AstroIntegration}
 */
export default () => ({
  name: "dev-toolbar-app",
  hooks: {
    "astro:config:setup": ({ addDevToolbarApp }) => {
      addDevToolbarApp("./astro-dev-toolbar-app/plugin.js");
    },
  },
});
```

```js title="astro-dev-toolbar-app/plugin.js"

/**
 * @type {import('astro').DevToolbarApp}
 */
export default {
  id: "my-plugin",
  name: "My Plugin",
  icon: "<svg>...</svg>",
  init() {
    console.log("I'm a dev toolbar app!")
  },
};
```
#### Опция `addMiddleware`

<p><Since v="3.5.0" /></p>

**Тип:** `(middleware:` [`AstroIntegrationMiddleware`](https://github.com/withastro/astro/blob/852ac0f75dfca1b2602e9cdbfa0447d9998e2449/packages/astro/src/%40types/astro.ts#L2124-L2127) `) => void;`

Добавляет [промежуточное ПО,](/ru/guides/middleware/), которое будет запускаться при каждом запросе. Принимает модуль `entrypoint`, содержащий промежуточное ПО, и `order`, указывающий, должно ли оно запускаться до (`pre`) других промежуточных программ или после (`post`).

```js title="@my-package/integration.js"
/**
 * @type {() => import('astro').AstroIntegration}
 */
export default () => ({
  name: "my-middleware-package",
  hooks: {
    "astro:config:setup": ({ addMiddleware }) => {
        addMiddleware({
          entrypoint: '@my-package/middleware',
          order: 'pre'
        });
    },
  },
});
```

Промежуточное ПО определяется в пакете с функцией `onRequest`, также как и с пользовательским промежуточным ПО.

```js title="@my-package/middleware.js"
import { defineMiddleware } from 'astro:middleware';

export const onRequest = defineMiddleware(async (context, request) => {
  if(context.url.pathname === '/some-test-path') {
    return Response.json({
      ok: true
    });
  }
});
```

#### Опция `injectRoute`

**Тип:** `({ pattern: string, entrypoint: string }) => void;`

Функция обратного вызова для инъекции маршрутов в проект Astro. Инжектируемые маршруты могут быть [страницами `.astro`](/ru/basics/astro-pages/) или [обработчиками маршрутов `.js` и `.ts`](/ru/guides/endpoints/#static-file-endpoints).

`injectRoute` принимает объект с `pattern` и `entrypoint`.

- `pattern` - куда маршрут должен быть выведен в браузере, например `/foo/bar`. Шаблон может использовать синтаксис пути к файлу Astro для обозначения динамических маршрутов, например `/foo/[bar]` или `/foo/[...bar]`. Обратите внимание, что расширение файла **не** требуется в `pattern`.
- `entrypoint` - обычный модульный указатель, указывающий на страницу `.astro` или обработчик маршрута `.js`/`.ts`, который обрабатывает маршрут, обозначенный в `pattern`.

Пример использования:

```js
injectRoute({
  // Используйте синтаксис шаблонов Astro для динамических маршрутов.
  pattern: '/subfolder/[dynamic]',
  // Используйте синтаксис относительного пути для локального маршрута.
  entrypoint: './src/dynamic-page.astro'
});
```

Для интеграции, предназначенной для установки в другие проекты, используйте имя пакета для ссылки на точку входа в маршрут.
В следующем примере показан пакет, опубликованный в npm под именем `@fancy/dashboard`, инжектирующий маршрут панели инструментов:

```js
injectRoute({
  pattern: '/fancy-dashboard',
  entrypoint: '@fancy/dashboard/dashboard.astro'
});
```

При публикации вашего пакета (в данном случае `@fancy/dashboard`) на npm, вы должны экспортировать `dashboard.astro` в ваш `package.json`:

```json title="package.json" "exports"
{
  "name": "@fancy/dashboard",
  // ...
  "exports": { "./dashboard.astro": "./dashboard.astro" }`
}
```

#### Опция `injectScript`

**Тип:** `(stage: InjectedScriptStage, content: string) => void;`

Функция обратного вызова для вставки строки содержимого JavaScript на каждую страницу.

Параметр **`stage`** указывает на то, как должен быть вставлен этот скрипт (`content`). Некоторые этапы позволяют вставлять скрипты без модификации, другие - оптимизировать во время [шага сборки Vite](https://vitejs.dev/guide/build.html):

- `"head-inline"`:  Вставляется в тег `<script>` в `<head>` каждой страницы. **Не** оптимизирован или разрешен Vite.
- `"before-hydration"`: Импортируется на стороне клиента, перед запуском скрипта гидратации. Оптимизируется и разрешается Vite.
- `"page"`: Аналогично `head-inline`, за исключением того, что импортируемый фрагмент обрабатывается Vite и объединяется с любыми другими тегами `<script>`, определенными внутри компонентов Astro на странице. Скрипт будет загружен с помощью `<script type="module">` в конечный вывод страницы, оптимизирован и разрешен Vite.
- ``page-ssr``: Импортируется как отдельный модуль в frontmatter каждого компонента страницы Astro. Поскольку на этом этапе импортируется ваш скрипт, глобальный `Astro` недоступен, и ваш скрипт будет запущен только один раз при первой оценке `import`.

   Основное применение этапа `page-ssr` - это вставка CSS `импорта` на каждую страницу для оптимизации и разрешения Vite:
    ```js
    injectScript('page-ssr', 'import "global-styles.css";');
    ```

### `astro:config:done`

**Предыдущий хук:** [`astro:config:setup`](#astroconfigsetup)

**Следующий хук:** [`astro:server:setup`](#astroserversetup) при работе в режиме "dev", или [`astro:build:start`](#astrobuildstart) при "production" сборке.

**Когда:** После того, как конфигурация Astro была разрешена, и другие интеграции выполнили свои хуки `astro:config:setup`.

**Зачем:** Для получения окончательной конфигурации для использования в других хуках.

```js
'astro:config:done'?: (options: { config: AstroConfig }) => void | Promise<void>;
```

#### Опция `config`

**Тип:** `AstroConfig`

Доступная только для чтения копия предоставленной пользователем [конфигурации Astro](/ru/reference/configuration-reference/). Это разрешается _после_ выполнения других интеграций.

### `astro:server:setup`

**Предыдущий хук:** [`astro:config:done`](#astroconfigdone)

**Следующий хук:** [`astro:server:start`](#astroserverstart)

**Когда:**  Сразу после создания сервера Vite в режиме "dev", но перед событием `listen()`. [См. API createServer Vite](https://vitejs.dev/guide/api-javascript.html#createserver) для получения дополнительной информации.

**Зачем:** Для обновления параметров сервера Vite и промежуточного ПО.

```js
'astro:server:setup'?: (options: { server: vite.ViteDevServer }) => void | Promise<void>;
```

#### Опция `server`

**Тип:** [`ViteDevServer`](https://vitejs.dev/guide/api-javascript.html#vitedevserver)

Изменяемый экземпляр сервера Vite, используемый в режиме "dev". Например, это [используется нашей интеграцией Partytown](/ru/guides/integrations-guide/partytown/) для вставки сервера Partytown в качестве промежуточного ПО:

```js
export default {
  name: 'partytown',
  hooks: {
    'astro:server:setup': ({ server }) => {
      server.middlewares.use(
        function middleware(req, res, next) {
          // handle requests
        }
      );
    }
  }
}
```

### `astro:server:start`

**Предыдущий хук:** [`astro:server:setup`](#astroserversetup)

**Следующий хук:** [`astro:server:done`](#astroserverdone)

**Когда:** Сразу после срабатывания события `listen()` сервера.

**Зачем:** Для перехвата сетевых запросов по указанному адресу. Если вы намерены использовать этот адрес для промежуточного ПО, рассмотрите возможность использования `astro:server:setup` вместо этого.

```js
'astro:server:start'?: (options: { address: AddressInfo }) => void | Promise<void>;
```

#### Опция `address`

**Тип:** [`AddressInfo`](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules__types_node_net_d_._net_.addressinfo.html)

Адрес, семейство и номер порта, предоставленные [модулем Net Node.js](https://nodejs.org/api/net.html).

### `astro:server:done`

**Следующий хук:** [`astro:server:start`](#astroserverstart)

**Когда:** Сразу после закрытия сервера разработки.

**Зачем:** Для выполнения любых событий очистки, которые могут быть запущены во время хуков `astro:server:setup` или `astro:server:start`.

```js
'astro:server:done'?: () => void | Promise<void>;
```

### `astro:build:start`

**Предыдущий хук:** [`astro:config:done`](#astroconfigdone)

**Следующий хук:** [`astro:build:setup`](#astrobuildsetup)

**Когда:** После события `astro:config:done`, но перед началом производственной сборки.

**Зачем:** Для настройки любых глобальных объектов или клиентов, необходимых во время производственной сборки. Это также может расширить параметры конфигурации сборки в [API адаптера](/ru/reference/adapter-reference/).

```js
'astro:build:start'?: () => void | Promise<void>;
```

### `astro:build:setup`

**Предыдущий хук:** [`astro:build:start`](#astrobuildstart)

**Следующий хук:** [`astro:build:ssr`](#astrobuildssr)

**Когда:** После хука `astro:build:start`, запускается непосредственно перед сборкой.

**Зачем:** На этом этапе конфигурация Vite для сборки полностью сконструирована, это ваш последний шанс ее изменить. Это может быть полезно, например, для перезаписи некоторых значений по умолчанию. Если вы не уверены, следует ли использовать этот хук или `astro:build:start`, используйте вместо этого `astro:build:start`.

```js
'astro:build:setup'?: (options: {
  vite: ViteConfigWithSSR;
  pages: Map<string, PageBuildData>;
  target: 'client' | 'server';
}) => void | Promise<void>;

```

### `astro:build:generated`

**Предыдущий хук:** [`astro:build:setup`](#astrobuildsetup)

**Когда:** После завершения статической производственной сборки, генерирующей маршруты и ассеты.

**Зачем:** Для доступа к сгенерированным маршрутам и ресурсам до очистки артефактов сборки. Это очень редкий случай использования. Мы рекомендуем использовать [`astro:build:done`](#astrobuilddone), если вам действительно нужен доступ к сгенерированным файлам перед очисткой.

```js
'astro:build:generated'?: (options: { dir: URL }) => void | Promise<void>;
```

### `astro:build:ssr`

**Предыдущий хук:** [`astro:build:setup`](#astrobuildsetup)

**Когда:** После завершения производственной сборки с SSR.

**Зачем:** Для доступа к манифесту SSR и карте излученных точек входа. Это полезно при создании пользовательских сборок SSR в плагинах или интеграциях.
- `entryPoints` сопоставляет маршрут страницы с физическим файлом, созданным после сборки;
- `middlewareEntryPoint` - путь файловой системы к файлу промежуточного ПО;

```js
'astro:build:ssr'?: (options: {
    manifest: SerializedSSRManifest,
    entryPoints: Map<RouteData, URL>,
    middlewareEntryPoint: URL
}) => void | Promise<void>;
```

### `astro:build:done`

**Предыдущий хук:** [`astro:build:ssr`](#astrobuildssr)

**Когда:** После завершения сборки (SSG или SSR).

**Зачем:**  Чтобы получить доступ к сгенерированным маршрутам и ассетам для расширения (например, скопировать содержимое в сгенерированную директорию `/assets`). Если вы планируете преобразовывать сгенерированные ассеты, мы рекомендуем использовать [API плагинов Vite](https://vitejs.dev/guide/api-plugin.html) и [настройку через `astro:config:setup`](#опция-updateconfig) вместо этого.

```js
'astro:build:done'?: (options: { dir: URL; routes: RouteData[], pages: { pathname: string }[] }) => void | Promise<void>;
```

#### Опция `dir`

**Тип:** [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL)

URL-путь к выходному каталогу сборки. Обратите внимание, что если вам нужна корректная строка абсолютного пути, вам следует использовать встроенную в Node утилиту [`fileURLToPath`](https://nodejs.org/api/url.html#urlfileurltopathurl).

```js
import { writeFile } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';

export default function myIntegration() {
  return {
    hooks: {
      'astro:build:done': async ({ dir }) => {
        const metadata = await getIntegrationMetadata();
        // Use fileURLToPath to get a valid, cross-platform absolute path string
        const outFile = fileURLToPath(new URL('./my-integration.json', dir));
        await writeFile(outFile, JSON.stringify(metadata));
      }
    }
  }
}
```

#### Опция `routes`

**Тип:** [`RouteData[]`](#справка-о-типе-routedata)

Список всех сгенерированных маршрутов вместе с их метаданными.

Вы можете ссылаться на полный тип `RouteData` ниже, но наиболее часто используемые свойства:

- `component` — путь к входному файлу относительно корня проекта
- `pathname` — URL выходного файла (не определен для маршрутов с параметрами `[dynamic]` и `[...spread]`)

##### Справка о типе `RouteData`

```ts
interface RouteData {
  /** Определяет, является ли данный маршрут HTML-страницей или конечной точкой без HTML */
  type: 'page' | 'endpoint';
  /** URL исходного компонента */
  component: string;
  /**
   * Путь URL-адреса вывода, по которому будет обслуживаться этот маршрут
   * Примечание: будет неопределен для маршрутов с параметрами `[dynamic]` и `[...spread]`
   */
  pathname?: string;
  /**
   * Регулярное выражение, используемое для сопоставления входного URL с запрошенным маршрутом
   * Например, "[fruit]/about.astro" создаст шаблон: /^\/([^/]+?)\/about\/?$/
   * где pattern.test("banana/about") возвращает "true"
   */
  pattern: RegExp;
  /**
   * Параметры динамического и развернутого маршрута
   * Например, "/pages/[lang]/[..slug].astro" выведет параметры ['lang', '...slug']
   */
  params: string[];
  /**
   * Аналогично полю "params", но с дополнительной связанной метаданными
   * Например, "/pages/[lang]/index.astro" выведет сегменты
   * [[ { content: 'lang', dynamic: true, spread: false } ]]
   */
  segments: { content: string; dynamic: boolean; spread: boolean; }[][];
  /**
   * Функция для рендеринга компонента на месте из набора входных данных.
   * Обычно используется для внутреннего использования, поэтому вызывайте с осторожностью!
   */
  generate: (data?: any) => string;
}
```

#### Опция `pages`

**Тип:** `{ pathname: string }[]`

Список всех сгенерированных страниц. Это объект с одним свойством.

- `pathname` — окончательный путь страницы.

## Разрешите установку с помощью `astro add`

[Команда `astro add`](/ru/reference/cli-reference/#astro-add) позволяет пользователям легко добавлять интеграции и адаптеры в свой проект. Если вы хотите, чтобы _ваша_ интеграция могла быть установлена с помощью этого инструмента, **добавьте `astro-integration` в поле `keywords` в вашем `package.json`**:

```json
{
  "name": "example",
  "keywords": ["astro-integration"],
}
```

Как только вы [опубликуете свою интеграцию на npm](https://docs.npmjs.com/cli/v8/commands/npm-publish), запуск `astro add example` установит ваш пакет с любыми зависимостями, указанными в вашем `package.json`. Это также применит вашу интеграцию к пользовательскому `astro.config`, как показано ниже:

```diff
// astro.config.mjs
import { defineConfig } from 'astro/config';
+ import example from 'example';

export default defineConfig({
+  integrations: [example()],
})
```

:::caution
Это предполагает, что ваше определение интеграции является 1) экспортом `default` и 2) функцией. Убедитесь, что это так, прежде чем добавлять ключевое слово `astro-integration`!
:::

## `AstroIntegrationLogger`

Экземпляр логгера Astro, полезный для записи логов. Этот логгер использует тот же [уровень логирования](/ru/reference/cli-reference/#--verbose), настроенный через CLI.

**Доступные методы** для записи в терминал:
- `logger.info("Сообщение")`;
- `logger.warn("Сообщение")`;
- `logger.error("Сообщение")`;
- `logger.debug("Сообщение")`;

Все сообщения дополняются меткой, которая имеет то же значение, что и интеграция.

```ts title="integration.ts" {8}
import type { AstroIntegration } from "astro";
export function formatIntegration(): AstroIntegration {
    return {
        name: "astro-format",
        hooks: {
            "astro:build:done": ({ logger }) => {
                // делаем что-то
                logger.info("Интеграция готова.");
            }
        }
    }
}
```

Приведенный выше пример будет регистрировать сообщение, которое включает предоставленное сообщение `info`:

```shell
[astro-format] Интеграция готова.
```

Чтобы записать в журнал несколько сообщений с другой меткой, используйте метод `.fork`, чтобы указать альтернативу стандартному `name`:

```ts title="integration.ts" ".fork"
import type { AstroIntegration } from "astro";
export function formatIntegration(): AstroIntegration {
    return {
        name: "astro-format",
        hooks: {
            "astro:config:done": ({ logger }) => {
                // делаем что-то
                logger.info("Интеграция готова.");
            },
            "astro:build:done": ({ logger }) => {
                const buildLogger = logger.fork("astro-format/build");
                // делаем что-то
                buildLogger.info("Сборка завершена.")
            }
        }
    }
}
```


Приведенный выше пример по умолчанию будет создавать логи с `[astro-format]`, и `[astro-format/build]` при указании:

```shell
[astro-format] Интеграция готова.
[astro-format/build] Сборка завершена.
```

## Порядок выполнения интеграций

Все интеграции запускаются в том порядке, в котором они настроены. Например, для массива `[react(), svelte()]` в пользовательском файле `astro.config.*`, `react` будет запущен раньше `svelte`.

В идеале ваша интеграция должна выполняться в любом порядке. Если это невозможно, мы рекомендуем документировать, что ваша интеграция должна быть первой или последней в массиве конфигурации `integrations` пользователя.

## Объединение интеграций в пресеты
	
Интеграция также может быть написана как набор нескольких более мелких интеграций. Мы называем эти наборы **пресетами.** Вместо создания функции-фабрики, возвращающей единственный объект интеграции, пресет возвращает _массив_ объектов интеграции. Это полезно для создания сложных функций из нескольких интеграций.

```js
integrations: [
  // Пример: где examplePreset() возвращает: [integrationOne, integrationTwo, ...etc]
  examplePreset()
]
```

## Ресурсы сообщества

- [Создание ваших собственных интеграций Astro](https://www.freecodecamp.org/news/how-to-use-the-astro-ui-framework/#chapter-8-build-your-own-astro-integrations-1) - Эммануэль Оханс на FreeCodeCamp
- [Шаблон интеграции Astro](https://github.com/florian-lefebvre/astro-integration-template) - Флориан Лефебр на GitHub